import React, { Component } from 'react'
import './index.css';
import axios from 'axios';

export default class Weather extends Component {
    state = {
        data: []
    }
    render() {
        return (
            <div className="weather-container">
                <input type="text" onKeyDown={this.searchWeather}/>
                <hr />
                <div className="result">
                    <ul>
                        {
                            this.state.data.map((item,index) => {
                                return <li key={index}>{item.date} - {item.week} - {item.wea}</li>;
                            })
                        }
                        
                    </ul>
                </div>
            </div>
        )
    }
    //获取天气信息
    searchWeather = async (e) => {
        //按下回车的时候
        if(e.keyCode === 13){
            //获取城市名字
            let city = e.target.value;
            //发送 AJAX  1. axios({})  axios('')  2. axios.get  axios.post 
            //?version=v1&appid=23941491&appsecret=TXoD5e8P
            let result = await axios({
                url: 'https://www.tianqiapi.com/api/',
                method: 'get',
                //设置查询字符串 params
                params: {
                    city: city,
                    version: 'v1',
                    appid: '23941491',
                    appsecret: 'TXoD5e8P'
                }
            });
            //获取结果
            // console.log(result.data.data);
            this.setState({
                data: result.data.data
            })

        }
    }
}
